import Vue from 'vue'
import VueRouter from 'vue-router'
// 路径别名，Vue 给咱配置了一个路径别名 @ 代表的就是 /src 文件
// 一般情况下，建议大家直接使用相对路径比较方便，按住 ctrl 键可以直接跳到对应的文件
import HomeView from '@/views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/pro',
    name: 'pro',
    component: () => import(/* webpackChunkName: "pro" */ '../views/product/Index.vue'),
    // 使用 children 属性来定义 嵌套路由，要注意：嵌套路由 也有一个  router-view 作为出口
    children: [
      {
        path: 'tv',
        component: () => import(/* webpackChunkName: "pro" */ '../views/product/Tv.vue'),
      },
      {
        path: 'phone',
        component: () => import(/* webpackChunkName: "pro" */ '../views/product/Phone.vue'),
      }
    ]
  },
  {
    path: '/news/:id?',
    component: () => import(/* webpackChunkName: "views" */ '../views/NewsView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 定义全局的路由导航守卫  钩子函数、回调函数
// 接收三个参数  to 到哪去  from 从哪来  next 下一步
router.beforeEach((to, from, next)=>{
  console.log(to);
  console.log(from);
  // 一般情况下我们在这里面可以追加我们想要的各种逻辑，比如说 权限控制！！！
  next();
})

router.afterEach((to, from)=>{
  console.log(to);
  console.log(from);
})

// 嵌套路由  子路由  children 定义  注意 router-view 出口
// 动态路由  路由传参   使用 /:id？
// 导航守卫   路由跳转的过程中，可以追加我们期望滴各种逻辑，注意 next 需要调用才能完成跳转

export default router
